<template>
  <div>
    <PDFContainer ref="PDFContainer" :page-width="1120" report-title="检查井清单">
      <div class="town-pdf-report-table-container">
        <div class="form-title">{{ areaName }} （街道、区）全区域检查井清单</div>
        <table class="town-pdf-report-table">
          <tr>
            <td>序号</td>
            <td>区域/区块</td>
            <td>分类（生活<br />小区、工业<br />园区、其他类<br />的内部管网）</td>
            <td>名称/编号<br />(所属排水<br />单元名称)</td>
            <td>井编号</td>
            <td>水质性状</td>
            <td>形制</td>
            <td>井深<br />（m）</td>
            <td>井内照片</td>
            <td>其他参数</td>
          </tr>
          <tr v-for="(well, index) in dataList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ well.type | filterType }}</td>
            <td>{{ well.name }}</td>
            <td>{{ well.wellNo }}</td>
            <td>{{ well.water | filterWater }}</td>
            <td>{{ well.shape | filterShape }}</td>
            <td>{{ well.material | filterMaterial }}</td>
            <td>{{ well.depth }}</td>
            <td>
              <img v-if="well.base64" :src="well.base64" crossorigin="anonymous" class="img-obj" />
            </td>
            <td>
              井盖材质：<br />
              {{ well.height }}<br />
              井点地面高程：<br />
              {{ well.height }}
            </td>
          </tr>
        </table>
      </div>
    </PDFContainer>
  </div>
</template>

<script>
import PDFContainer from '@/components/PDF/PDF.vue'
import { checkWellAreaType, checkWellWaterType, checkWellShape, checkWellMaterial } from '@/config/enumeration.js'
export default {
  name: 'wellCheckPdfReport',
  components: {
    PDFContainer
  },
  props: {
    areaName: {
      type: [String, Number], // Number id 注意精度丢失，值会发生改变
      default: ''
    },
    reportList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  filters: {
    filterType(type) {
      const typeItem = checkWellAreaType.find(item => item.value === type)
      if (typeItem) {
        return typeItem.label
      } else {
        return type
      }
    },
    filterWater(type) {
      const typeItem = checkWellWaterType.find(item => item.value === +type)
      if (typeItem) {
        return typeItem.label
      } else {
        return type
      }
    },
    filterShape(type) {
      const typeItem = checkWellShape.find(item => item.value === +type)
      if (typeItem) {
        return typeItem.label
      } else {
        return type
      }
    },
    filterMaterial(type) {
      const typeItem = checkWellMaterial.find(item => item.value === +type)
      if (typeItem) {
        return typeItem.label
      } else {
        return type
      }
    }
  },
  data() {
    return {
      dataList: [],
      reporttig: false
    }
  },
  methods: {
    async tranformReportList(reportList) {
      // 将 图片数据转化为 base64 编码，解决跨域问题
      const list = []
      reportList.map(item => {
        list.push(
          new Promise(resolve => {
            if (!item.imageUrl) {
              item.base64 = ''
              resolve(item)
            } else {
              // this.getBase64Image('https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF', res => {
              this.getBase64Image(item.imageUrl, res => {
                item.base64 = res
                resolve(item)
              })
            }
          })
        )
      })
      const dataList = await Promise.all(list)
      console.log('dataList', dataList)
      this.dataList = dataList
      this.reporttig = false
      this.$nextTick(() => {
        // 导出
        const ref = this.$refs.PDFContainer
        if (ref) {
          // 导出为pdf
          ref.exportPages()
        }
      })
    },
    // 解决图片跨域
    getBase64Image(url, callback) {
      var image = new Image()
      image.crossOrigin = '*' // 支持跨域图片
      image.src = url + '?v=' + Math.random() // 处理缓存
      image.onload = () => {
        var canvas = document.createElement('canvas')
        var context = canvas.getContext('2d')
        canvas.width = image.width
        canvas.height = image.height
        context.drawImage(image, 0, 0, image.width, image.height)
        const ndata = canvas.toDataURL('image/jpeg', 1.0)
        callback ? callback(ndata) : null
      }
    },
    exportPages() {
      if (!this.reporttig) {
        this.reporttig = true
        this.$message.warning('打印中...')
        this.tranformReportList(this.reportList)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.town-pdf-report-table-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px 40px;
  background: white;
}
.town-pdf-report-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #000000;

  tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;

    td {
      border: 1px solid #000000;
      padding: 11px 8px;
      overflow-wrap: break-word;
      font-weight: 500;
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
      word-break: break-word;
    }
  }
}

.form-title {
  padding: 30px 0 20px;
  text-align: center;
  font-size: 36px;
  font-weight: 600;
}

.img-obj {
  width: 100px;
  height: 100px;
  object-fit: contain;
  background: #fff;
}
</style>
